<template>
    <!-- 管理员管理页面列表 -->
        <div class="examinee-main">
            <div class="main-title">
                <div class="title-name">{{pageType==="examinee"?"考生姓名":"姓名"}}</div>
                <div class="title-register_time">注册时间</div>
                <div class="title-ID_card">身份证号码</div>
                <div class="title-phone_number">手机号码</div>
                <div class="title-last_date" v-if="pageType!=='examinee'">上次登录时间</div>
                <div class="title-record_num">考务档案数</div>
                <div class="title-operation">操作</div>
            </div>
            <div class="main-list">
                <div class="main-list-item" v-for="(item, index) in dataList" :key="index">
                    <div class="title-name">{{item.name}}</div>
                    <div class="title-register_time">{{item.register_time}}</div>
                    <div class="title-ID_card">{{item.ID_card}}</div>
                    <div class="title-phone_number">{{item.phone_number}}</div>
                    <div class="title-last_date" v-if="item.last_date">{{item.last_date}}</div>
                    <div class="title-record_num">{{item.record_num}}</div>
                    <div class="title-operation">
                        <button @click="handleClickBtn(item)">信息查看及编辑</button>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
    export default {
        props: {
            pageType: String,
            dataList: {
                type: [Object ,Array],
                default:  function(){
                    return []
                }
            }
        },
        data() {
            return {
            }
        },
        methods: {
            handleClickBtn(info) {
                if(this.pageType === "examiner") {
                    this.$router.push({name: "examinerInfo"})
                }
            }
        }
    }
</script>

<style lang="less">
// 管理员管理页面列表
.examinee-main {
    margin-top: 15px;
    background: white;
    .main-title {
        height: 48px;
        background-color: rgba(242, 242, 242, 1);
        display: flex;
        align-items: center;
    }
    .main-list {
        .main-list-item {
            height: 48px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #999;
        }
    }
    .main-title, .main-list-item {
        .title-name {
            flex: 1;
            padding-left: 15px;
        }
        .title-register_time {
            flex: 1;
        }
        .title-ID_card {
            flex: 2;
        }
        .title-phone_number {
            flex: 2;
        }
        .title-last_date {
            flex:2;
        }
        .title-lastDate {
            flex: 2;
        }
        .title-record_num {
            flex: 3;
        }
        .title-operation {
            flex: 3;
        }
    }
}
</style>